<template>
    <div class="progress-page">
        <el-card class="box-card">
            <el-steps space="150px" :active="subjectStep" finish-status="success" direction="vertical">
                <el-step v-for="(step, index) in steps" :key="index" :title="step.title">
                    <template #description>
                        <br>
                        <div class="step-content">
                            <div style="font-size: large;">{{ step.description }}</div>
                            <br>
                            <el-steps class="mb-4" style="max-width: 600px" finish-status="success"
                                process-status="wait" :space="200" :active="step.stateStep" simple>
                                <el-step title="未报名" icon="WarningFilled" />
                                <el-step title="已报名" icon="CircleCheckFilled" />
                                <el-step v-if="step.isQualified" title="合格" icon="DocumentChecked" />
                                <el-step v-else>
                                    <template #title>
                                        <span style="color: red;">不合格</span>
                                    </template>
                                    <template #icon>
                                        <el-icon style="color: red;font-size: 24px;">
                                            <DocumentDelete />
                                        </el-icon>
                                    </template>
                                </el-step>
                            </el-steps>
                            <el-button v-show="step.stateStep === 1" type="success" size="large">前往报名</el-button>
                            <el-button v-show="step.stateStep > 2" type="info" size="large"
                                @click="openDialog(step.title, step.description)">查看考试成绩</el-button>
                        </div>
                        <br>
                    </template>
                </el-step>
            </el-steps>
        </el-card>
        <!-- Dialog for displaying exam results -->
        <el-dialog v-model="dialogVisible" width="50%" :before-close="handleClose">
            <exam-result :studyProcess = "studyProcess" subjectName = "qq"></exam-result>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { progressItemData } from '@/api/process';
import { ref } from 'vue';
import * as progressApi from '@/api/process';

const subjectStep = ref(0); // 当前步骤索引
const studyProcess = ref<progressItemData>();

const dialogVisible = ref(false);
const dialogData = ref({ title: '', description: '' });
const examResults = ref('合格'); // 你可以根据实际情况设置成绩

const progressMap = new Map<string, number>();
progressMap.set('未报名', 1);
progressMap.set('已报名', 2);
progressMap.set('合格', 3);
progressMap.set('不合格', 3);

const steps = [
    { title: '科目一', description: '理论考试', stateStep: 0 ,isQualified : true}, // 科目一的详细进度
    { title: '科目二', description: '场地驾驶考试', stateStep: 0,isQualified : true}, // 科目二的详细进度
    { title: '科目三', description: '道路驾驶考试', stateStep: 0,isQualified : true}, // 科目三的详细进度
    { title: '科目四', description: '安全文明驾驶考试', stateStep: 0,isQualified : true} // 科目四的详细进度
];
const fetchProgressData = async (studentId: number) => {
    const response = await progressApi.getDataByStudentId(studentId);
    studyProcess.value = response.data;
    updateSteps();
};
const updateSteps = () => {
    if (studyProcess.value) {
        switch (studyProcess.value.subject) {
            case '科目一':
                {
                    subjectStep.value = 0;
                    steps[0].stateStep = progressMap.get(studyProcess.value.processState);
                    if (studyProcess.value.processState == '不合格') steps[0].isQualified = false;
                    break;
                }
            case '科目二':
                {
                    steps[0].stateStep = 3;subjectStep.value = 1;
                    steps[1].stateStep = progressMap.get(studyProcess.value.processState);
                    if (studyProcess.value.processState == '不合格') steps[1].isQualified = false;
                    break;
                }
            case '科目三':
                {
                    steps[0].stateStep = 3;
                    steps[1].stateStep = 3;subjectStep.value = 2;
                    steps[2].stateStep = progressMap.get(studyProcess.value.processState);
                    if (studyProcess.value.processState == '不合格') steps[2].isQualified = false;
                    break;
                }
            case '科目四':
                {
                    steps[0].stateStep = 3;
                    steps[1].stateStep = 3;
                    steps[2].stateStep = 3;subjectStep.value = 3;
                    steps[3].stateStep = progressMap.get(studyProcess.value.processState);
                    if (studyProcess.value.processState == '不合格') steps[3].isQualified = false;
                    if (studyProcess.value.processState == '合格') subjectStep.value = 4;
                    break;
                }

        }
    }
}
const openDialog = (title: string, description: string) => {
    dialogData.value = { title, description };
    dialogVisible.value = true;
};

const handleClose = () => {
    dialogVisible.value = false;
};
fetchProgressData(1);
</script>

<style scoped>
.progress-page {
    padding: 20px;
}

.box-card {
    margin-bottom: 20px;
    height: 800px;
    max-width: 1600px;
}

.step-progress {
    margin-left: 20px;
    width: 600px;
    /* 增加进度条的宽度 */
}

.el-step__title {
    font-size: 32px;
}

.el-step__description {
    font-size: 32px;
    /* 增加字体大小 */
}

.el-steps__line {
    border-width: 3px;
    /* 增加步骤条的线条粗细 */
}
</style>